<template>
	<div class='main'>
		<div id="domId"></div>
	</div>
</template>

<script>
	const api = window.$api.demo.cad
	export default {
		name: 'HelloWorld',
		data() {
			return {
				viewToken: '',
				viewer2D: '',
				app: '',
			}
		},
		async created() {

			let data = {
				fileId: '10000818943543'
			}

			const res = await this.$awaitWraper(api.getviewtoken(data))
			this.viewToken = res
			this.getMap()
		},
		methods: {
			getMap() {
				var that = this
				var options = new window.BimfaceSDKLoaderConfig();
				options.viewToken = that.viewToken;
				window.BimfaceSDKLoader.load(options, that.successCallback, that.failureCallback);
			},
			// 加载成功回调函数
			successCallback(viewMetaData) {
				if (viewMetaData.viewType == "drawingView") {
					// 获取DOM元素
					let dom4Show = document.getElementById('domId');
					// 构造WebApplication配置项
					let webAppConfig = new window.Glodon.Bimface.Application.WebApplicationDrawingConfig();
					webAppConfig.domElement = dom4Show;
					// 构造WebApplication对象
					this.app = new window.Glodon.Bimface.Application.WebApplicationDrawing(webAppConfig);
					// 获取viewer对象
					this.viewer2D = this.app.getViewer();
					// 加载图纸
					this.viewer2D.loadDrawing({
						viewToken: this.viewToken
					});
					// 监听添加view完成的事件
					this.viewer2D.addEventListener(window.Glodon.Bimface.Viewer.ViewerDrawingEvent.Loaded, function() {
						//自适应屏幕大小
						window.onresize = function() {
							this.viewer2D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
						}

					});
				}
			},
			// 加载失败回调函数
			failureCallback(error) {
				console.log(error);
			},

		},
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	html,
	body {
		height: 100%;
	}

	.buttons {
		font-size: 0;
	}

	.button {
		margin: 5px 0 5px 5px;
		width: 100px;
		height: 30px;
		border-radius: 3px;
		border: none;
		background: #32D3A6;
		color: #FFFFFF;
	}

	.main {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	#domId {
		flex: 1;
		height: 500px;
	}
</style>
